<template>
  <div>
    <span id="title"><b>医院科室管理</b></span>

    <div id="shaixuan_1">&nbsp;
      <i class="iconfont icon-shaixuan"></i>
      <span slot="title">筛选</span>
    </div>
    <div id="shaixuan_2">
      <div id="text">
        <font>医院或科室名称：</font>
      </div>
      <div id="input">
        <el-input v-model="input"
                  placeholder="请输入医院或科室名称"></el-input>
      </div>
      <div id="date">
        <font>提交时间：</font>
        <el-date-picker v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div id="button">
        <el-button type="primary"
                   @click="chose">筛选</el-button>
      </div>
    </div>

    <div id="data_1">&nbsp;
      <i class="iconfont icon-querylist"></i>
      <span>科室列表</span>
      <el-button type="primary"
                 id="add"
                 @click="back">返回</el-button>
      <el-button type="primary"
                 id="add"
                 @click="addDepartment">新增科室</el-button>

    </div>
    <div id="data_2">
      <div id="data_2_2">
        <DepartmentsData :departments="departments"
                         @refresh="refresh"
                         @back="back"
                         @findSubordinateDepartment="findSubordinateDepartment"></DepartmentsData>
      </div>
      <div id="page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑"
               :visible.sync="dialogVisible"
               width="50%"
               v-if="ref"
               @close="close">
      <div>
        <!-- 在对话框中显示当前行的数据 
            接受数据的方法(有参数)不要写（）
        -->
        <AddDepartment @close="close"
                       @change="change"></AddDepartment>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DepartmentsData from "./departmentsData.vue"
import AddDepartment from "./addDepartment.vue"
export default {
  name: "Departments",
  components: {
    DepartmentsData,
    AddDepartment
  },
  data () {
    return {
      input: null,
      fatherid: 0,
      starttime: '',
      endtime: '',
      date: '',
      departments: [],
      currentPage: 1,
      pageSize: 10,
      total: 1,
      dialogVisible: false,
      index: null,
      ref: false, //刷新
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  methods: {
    addDepartment: function () {
      //创建对话框
      this.ref = true;
      //显示对话框
      this.dialogVisible = true;
    },
    //关闭对话框
    close: function () {
      this.dialogVisible = false;
      this.ref = false;
    },
    //修改处方信息
    change: function (department) {
      //发送请求修改后台数据：修改成功才修改前台
      this.$axios({
        method: "post",
        url: "/hospitalDepartment/addDepartment",
        data: department
      }).then(() => {
        this.$message.success("添加成功");
        this.findAll();
        this.findTotalCount();
      });
      this.dialogVisible = false;
      //销毁对话框
      this.ref = false;
    },
    //筛选
    chose: function () {
      this.currentPage = 1;
      this.fatherid = 0;
      //默认输入值为''
      if (this.input == '') {
        this.input = null;
      }
      //刷新后没选择时间时，默认日期为undefined
      if (this.date) {
        let time = this.date;
        this.starttime = time[0];
        this.endtime = time[1];
      }
      //日期清空时，默认日期为null
      if (this.date == null) {
        this.starttime = '';
        this.endtime = '';
      }
      this.findAll();
      this.findTotalCount();
    },
    //刷新页面
    refresh () {
      this.findAll();
      this.findTotalCount();
    },
    //查看下级科室
    findSubordinateDepartment (id) {
      this.input = null;
      this.starttime = '';
      this.endtime = '';
      this.fatherid = id;
      this.findAll();
      this.findTotalCount();
    },
    //查看上级科室
    back () {
      this.fatherid = 0;
      this.findAll();
      this.findTotalCount();
    },
    // 根据条件查询所有处方
    findAll () {
      this.$axios({
        method: "get",
        url: "/hospitalDepartment/findAll",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          fatherid: this.fatherid,
          name: this.input,
          starttime: this.starttime,
          endtime: this.endtime
        }
      }).then((res) => {
        this.departments = res.data.data;
      });
    },
    // 根据条件查询处方总数
    findTotalCount () {
      this.$axios({
        method: "get",
        url: "/hospitalDepartment/findTotalCount",
        params: {
          fatherid: this.fatherid,
          name: this.input,
          starttime: this.starttime,
          endtime: this.endtime
        }
      }).then((res) => {
        this.total = res.data.data;
      });
    },
    // 每页显示条数
    handleSizeChange (val) {
      this.pageSize = val;
      this.findAll();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findAll();
    }
  },
  created () {
    // 分页查询处方单
    this.findAll();
    // 获取处方单总数
    this.findTotalCount();
  }
}
</script>

<style scoped>
#title {
  font-size: 30px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}

#data_1 {
  /* border: 1px solid red; */
  margin-right: 50px;
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
#data_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 50px;
  overflow: hidden;
}

#data_2_2 {
  margin-top: 20px;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
#add {
  float: right;
  margin-top: 5px;
  margin-right: 50px;
}
</style>
